<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<link href="css/H-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://lib.h-ui.net/jquery/1.9.1/jquery.min.js"></script>
<title>jquery.Huipreview.js - H-ui前端框架官方网站 - 专注前端解决方案</title>
<meta name="keywords" content="jquery.Huipreview.js,鼠标经过图片预览大图插件,H-ui前端框架">
<meta name="description" content="jquery.Huipreview.js插件帮助手册。">
<style type="text/css">
.img-list .item { float: left; width: 180px; height: auto; margin-right: 20px; margin-top: 20px; }
</style>
</head>
<body>
<article class="cl pd-20">
	<h1 class="page_title">jquery.Huipreview.js
		<span class="label label-success radius">已封装</span>
	</h1>
	<p>H-ui.js 中已封装，无需单独下载。单独下载地址 <a href="http://lib.h-ui.net/Hui/v3.0.4/jquery.Huipreview.js" class="btn radius btn-primary">jquery.Huipreview.js</a> </p>
	<p>jQuery.Huipreview是一个用js编写的jQuery插件，实现鼠标经过图片预览大图。</p>
	<h2>使用方法</h2>
	<p>1、jQuery.Huipreview.js依赖jquery或者zepto.js。</p>
	<p>js调用</p>
	<pre class="prettyprint linenums">$(".preview").Huipreview();</pre>
	<h2>demo效果</h2>
	<div class="codeView docs-example">
		<div class="clearfix img-list">
			<div class="item"> <a href="javascript:;" class="preview" style="display:block" data-width="300" data-height="400" data-src="http://pic.huawo.zcool.cn/photos/44506/1493853619623.jpg@2o.jpg" data-title="" title=""><img src="http://pic.huawo.zcool.cn/photos/44506/1493853619623.jpg@2o.jpg" width="180"></a> </div>
			<div class="item"> <a href="javascript:;" class="preview" style="display:block" data-width="300" data-height="400" data-src="http://pic.huawo.zcool.cn/photos/44506/1493853619623.jpg@2o.jpg" data-title="" title=""><img src="http://pic.huawo.zcool.cn/photos/44506/1493853619623.jpg@2o.jpg" width="180"></a> </div>
			<div class="item"> <a href="javascript:;" class="preview" style="display:block" data-width="300" data-height="400" data-src="http://pic.huawo.zcool.cn/photos/44506/1493853619623.jpg@2o.jpg" data-title="" title=""><img src="http://pic.huawo.zcool.cn/photos/44506/1493853619623.jpg@2o.jpg" width="180"></a> </div>
			<div class="item"> <a href="javascript:;" class="preview" style="display:block" data-width="300" data-height="400" data-src="http://pic.huawo.zcool.cn/photos/44506/1493853619623.jpg@2o.jpg" data-title="" title=""><img src="http://pic.huawo.zcool.cn/photos/44506/1493853619623.jpg@2o.jpg" width="180"></a> </div>
			<div class="item"> <a href="javascript:;" class="preview" style="display:block" data-width="300" data-height="400" data-src="http://pic.huawo.zcool.cn/photos/44506/1493853619623.jpg@2o.jpg" data-title="" title=""><img src="http://pic.huawo.zcool.cn/photos/44506/1493853619623.jpg@2o.jpg" width="180"></a> </div>
			<div class="item"> <a href="javascript:;" class="preview" style="display:block" data-width="300" data-height="400" data-src="http://pic.huawo.zcool.cn/photos/44506/1493853619623.jpg@2o.jpg" data-title="" title=""><img src="http://pic.huawo.zcool.cn/photos/44506/1493853619623.jpg@2o.jpg" width="180"></a> </div>
		</div>
	</div>
	<h2>相关参数</h2>
	<table class="table table-border table-bg table-bordered">
		<thead>
			<tr>
				<th width="10%">属性</th>
				<th width="10%">默认值</th>
				<th width="15%">描述</th>
				<th>备注</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>className</td>
				<td>active</td>
				<td>显示大图时追加的样式</td>
				<td></td>
			</tr>
			<tr>
				<td>bigImgWidth</td>
				<td>300</td>
				<td>大图尺寸（不要单位）</td>
				<td>可自行修改</td>
			</tr>
		</tbody>
	</table>
</article>
<script type="text/javascript" src="http://lib.h-ui.net/prettify.js"></script> 
<script type="text/javascript" src="js/jQuery.Huipreview.js"></script> 
<script>
$(function(){
	prettyPrint();
	$(".preview").Huipreview();
});
</script>
</body>
</html>
